<template>
    <div class="container">
        <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="auto">
            <div class="formContainer">
                <div>
                    <el-form-item label="业务类型" prop="BusinessId">
                        <BusinessSelect v-model="form.BusinessId" placeholder="请选择业务类型" />
                    </el-form-item>

                    <el-form-item label="订单总价" prop="Customer">
                        <el-input v-model="orderTotal" :disabled="true" />
                    </el-form-item>

                    <el-form-item prop="Customer">
                        <el-button @click="submitForm(ruleFormRef)">确定</el-button>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="顾客" prop="Customer">
                        <CustomerSelect v-model="form.Customer" placeholder="请选择订单类型" />
                    </el-form-item>

                    <el-form-item label="订单类型" prop="OrderType">
                        <DictSelect v-model="form.OrderType" type-name="订单类型" placeholder="请选择订单类型" />
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <ShopList v-model="selectedProducts"/>
    </div>
</template>

<script lang="ts" setup>
    import { computed, reactive, ref } from 'vue';
    import { ComponentSize, FormInstance, FormRules, ElMessage } from 'element-plus'
    import DictSelect from '../../components/DictSelect.vue';
    import BusinessSelect from '../../components/BusinessSelect.vue';
    import CustomerSelect from '../../components/CustomerSelect.vue';
    import ShopList from '../../components/ShopList.vue';
    import orderinfoapi from '../../api/orderinfoapi';

    const emit = defineEmits(["onSave"]);

    // 获取表单组件实例
    const ruleFormRef = ref<FormInstance>();

    // 选中的商品
    const selectedProducts = ref<Array<any>>([]);

    // 商品总价格
    const orderTotal = computed(()=>{
        if(selectedProducts.value.length==0) return 0;
        
        return selectedProducts.value.reduce((previousValue,item)=>{
            return previousValue + item.price * item.count;
        },0);
    });

    // 模型接口
    interface OrderForm {
        BusinessId: Number | null
        OrderType: Number | null
        Customer: Number | null
        OrderTotal: Number | null
    }

    // 模型实例
    const form = ref<OrderForm>({
        BusinessId: null,
        OrderType: null,
        Customer: null,
        OrderTotal: 0,
    })

    // 查询参数对象
    const queryParam = reactive({
        productName: "",
        pageSize: 5,
        pageIndex: 1
    })
    const total = ref<number>(0)

    // 校验规则
    const rules = reactive<FormRules<OrderForm>>({
        BusinessId: [
            { required: true, message: '请选择业务类型', trigger: 'blur' },
        ],
        OrderType: [
            { required: true, message: '请选择订单类型', trigger: 'blue' },
        ],
        Customer: [
            { required: true, message: '请选择顾客', trigger: 'blue' }
        ]
    })

    // 表单提交
    const submitForm = async (formEl: FormInstance | undefined) => {
        // 获取组件
        if (!formEl) return

        // 表单验证事件
        await formEl.validate((valid, fields) => {
            console.log(selectedProducts.value);

            // 判断验证是否通过
            if (valid) {
                let data = {...form.value,orderTotal:orderTotal.value,orderDetails:selectedProducts.value}
                console.log(data);
                
                // 验证通过
                orderinfoapi.add(data).then((res:any)=>{
                    if(res.code==1){
                        ElMessage.success({
                            message:"成功"
                        });
                        emit("onSave");
                    }else{
                        ElMessage.error({
                            message:"错误"
                        });
                    }
                });
                
            } else {
                // 验证失败
            }
        })
    }


</script>

<style scoped>
    .formContainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }

    

    .el-button+.el-button {
        margin-left: 0;
    }
</style>